<template>
  <view>
    <!-- 自定义导航栏 -->
    <view class="navBarBox">
      <!-- 状态栏占位 -->
      <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
      <!-- 真正的导航栏内容 -->
      <!-- <view class="navBar">
        <view class="navList">
          <view
            v-for="(item, index) in navList"
            :key="index"
            @click="onClickItem(index)"
            :class="{ active: current === index }"
          >
            {{ item }}
          </view>
          <view class="navLine" :style="{ left: left + 'px', top: top + 'px' }"></view>
        </view> -->
      <NavBar :navList="navList" />
    </view>
  </view>
  <!-- 页面内容 -->
  <view>我是页面内容</view>
  <!-- </view> -->
</template>

<script setup lang="ts">
import NavBar from '../../components/NavBar.vue'
// import NavBar from '../components/NavBar.vue'

import { ref } from 'vue'
import { onReady, onShow } from '@dcloudio/uni-app'
import { getCurrentInstance } from 'vue'

// 设置安全区域
const statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']

// 导航栏组件
const navList = ref(['通知', '互换'])

//点击修改
// const onClickItem = (index: number) => {
//   if (current.value !== index) {
//     current.value = index
//     setTimeout(() => {
//       setNavLine()
//     }, 1000)
//   }
// }
// // 设置导航栏下划线移动
// const setNavLine = () => {
//   uni
//     .createSelectorQuery()
//     .in(that)
//     .select('.active')
//     .boundingClientRect((data) => {
//       //data  可以打印data输出看详细数据，有很多数据信息
//       // var left = data.width //表示元素宽度
//       top.value = (data as NodeInfo).top - 10
//       left.value = (data as NodeInfo).left + (data as NodeInfo).width / 2 - 28
//     })
//     .exec()
// }
</script>

<style scoped lang="scss">
// .navBarBox {
//   background-color: #f6f6f6;
//   .navBar {
//     position: relative;
//     .navList {
//       display: flex;
//       justify-items: start;
//       height: 90rpx;
//       align-content: end;
//       view {
//         margin-left: 30rpx;
//         text-align: center;
//         line-height: 88rpx;
//         font-size: 32rpx;
//         color: #333333;
//       }
//       .active {
//         font-weight: 700;
//         font-size: 50rpx;
//       }
//     }
//     .navLine {
//       width: 40rpx;
//       height: 10rpx;
//       background-color: #38bace;
//       border-radius: 3rem;
//       position: absolute;
//       left: 55rpx;
//       bottom: 6rpx;
//     }
//   }
// }
</style>
